<template>
  <ul class="time-wrapper mt10">
    <li  v-for="(t, i) in times" :key="t.timeId">
      <a class="appoint-select" href="javascript:;" @click="confirmOrder(t, i)" v-if="t.leftNumber > 0">{{t.beginTime}}-{{t.endTime}}</a>
      <a class="appoint-select disabled" href="javascript:;" v-else>{{t.beginTime}}-{{t.endTime}}</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['times'],
  methods: {
    confirmOrder (t, i) {
      if (t.endTime.slice(0, 2) <= 12) {
        t.timeFlag = 1
      } else {
        t.timeFlag = 2
      }
      sessionStorage.appointTime = JSON.stringify(t)
      this.goNext()
    },
    goNext () {
      this.$router.replace('/appointment/confirm-appoint?selectperson=1')
    }
  }
}
</script>
<style lang="less" scoped>
.time-wrapper {
  overflow: auto;
  >li {
    width: 50%;
    float: left;
    margin-bottom: 10px;
  }
}
</style>

